<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="./js/vue2.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/anli.css" />
    <link rel="stylesheet" href="./css/animate.css" />

    <!-- <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }

      .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
      }
    </style> -->
  </head>

  <body>
    <div id="app">
      <div class="add">
        编号:<input type="text" v-model="count.id" v-foucs /> 品牌名称:<input
          type="text"
          v-model="count.name"
          @keydown.enter="addList"
        />
        <input type="button" value="添加" @click="addList" />
      </div>
      <div class="add">
        品牌名称:
        <input v-model="searchvalue" type="text" placeholder="请输入搜索条件" />
      </div>
      <div>
        <table class="tb">
          <tbody>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
            </tr>

            <tr v-for="(item,index) in searchList" :key="index">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.time | gettime }}</td>
              <td>
                <a @click="deletList(index)" href="javascript:void(0)">删除</a>
              </td>
            </tr>
            <tr>
              <td colspan="4" v-if="searchList.length==0">靓仔过来玩啊</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>总数: {{ total }}</div>
      <transition
       
        enter-active-class="animated zoomIn"
        enter-active-class="animated zoomOut"
      >
        <div class="model" v-show="isShow">
          <span @click="close">关闭</span>
          <input
            @click="clicksure(clickvalue)"
            class="btn1"
            type="button"
            value="确认"
          />
          <input @click="cancel" class="btn2" type="button" value="取消" />
        </div>
      </transition>
    </div>
    <script>
      //使用自定义指令,完成光标的自动聚焦
      //利用Vue.directive('指令id',{inserted:function(el,binding){}}
      Vue.directive("foucs", {
        inserted(el, binding) {
          el.focus();
        }
      });
      Vue.filter("gettime", function(time, splicchar) {
        var date = new Date(time);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      });
      var vm = new Vue({
        el: "#app",
        data: {
          list: [
            { id: "1", name: "雅诗兰黛", time: new Date() },
            { id: "2", name: "施瓦辛格", time: new Date() },
            { id: "3", name: "索尔", time: new Date() },
            { id: "4", name: "洛基", time: new Date() },
            { id: "5", name: "托尼", time: new Date() }
          ],
          clickId: "",
          count: { id: "", name: "", time: new Date() },
          searchvalue: "",
          isShow: false
        },
        //使用DOM对象实现focus事件
        // mounted(){
        //   document.getElementById('id').focus();
        // },

        //使用ref实现focus事件

        // mounted(){
        //  this.$refs.id.focus();
        // },
        methods: {
          addList() {
            // let a = this.list.filter(item => item.id === '1')
            // console.log(a)
            this.list.push({ ...this.count });
            this.count = { id: "", name: "", time: new Date() };
          },
          deletList(id) {
            // 点击当前的这个删除按钮就获取当前的 这个按钮的id
            this.clickId = id;
            this.isShow = true

          },
          clicksure(id) {
            //获取点击的当前的index来获取id

            this.list.splice(this.clickId, 1);
            this.isShow = false;
          },
          cancel() {
            this.isShow = false;
          },
          close() {
            this.isShow = false;  
          }
        },
        computed: {
          searchList() {
            return this.list.filter(
              item => item.name.indexOf(this.searchvalue) != -1
            );
          },
          total() {
            return this.searchList.length;
          }
        },
        watch: {
          searchList(newval, oldval) {
            if (newval.length > oldval.length) {
              alert("添加成功");
            }
          }
        }
      });
    </script>
  </body>
</html>
<!-- filter:遍历数组的另一个方式,实时的改变
      如果没有返回的那一项,就直接遍历整个数组 ,如果满足了return的条件,就返回当前的那一项
computed: 对象的方式返回一个回调函数
          必须要和data获取computed里面的数据关联起来,才能实施操作
          比如点击添加的时候,返回添加所有项的总数(索引数)
watch:侦听data或者computed里面的数据
   比如:watch: {
  searchList (newval,oldval) {
    if (newval.length > oldval.length) {
      alert('添加成功')
    }
  }
}
函数的参数有新的数据,旧的数据
 案例: 如果添加了新的数据或者旧的数据发生改变了就可以通过侦听的方法知道,相应的做出一些提示或者数据的变化 -->
